<template>
  <div id="asiderBar">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :collapse="isCollapse"
      :router="true"
      active-text-color="#ffffff"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="iconfont icon-mulu"></i>
          <span>目录管理</span>
        </template>
<!--          <el-menu-item index="1">-->
<!--            <template slot="title">-->
<!--              <i class="iconfont icon-shiliangtu"></i>-->
<!--              <span>第一师</span>-->
<!--            </template>-->
<!--          </el-menu-item>-->
          <el-menu-item index="/catalog">
            <template slot="title">
              <i class="iconfont icon-qingdan"></i>
              <span>目录管理</span>
            </template>
          </el-menu-item>
<!--          <el-menu-item index="3">-->
<!--            <template slot="title">-->
<!--              <i class="iconfont icon-tuji"></i>-->
<!--              <span>第三师</span>-->
<!--            </template>-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="4">-->
<!--            <template slot="title">-->
<!--              <i class="i·  confont icon-baogao"></i>-->
<!--              <span>第四师</span>-->
<!--            </template>-->
<!--          </el-menu-item>-->
      </el-submenu>
<!--      <el-submenu index="2">-->
<!--        <template slot="title">-->
<!--          <i class="iconfont icon-shuju"></i>-->
<!--          <span>数据备份管理</span>-->
<!--        </template>-->
<!--        <el-menu-item index="/theBackupList">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-biaodanliebiao-14"></i>-->
<!--            <span> 备份列表</span>-->
<!--           </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/theBackupRecovery">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-huifu"></i>-->
<!--            <span> 备份恢复</span>-->
<!--          </template>-->

<!--        </el-menu-item>-->
<!--      </el-submenu>-->
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "AsideBar2",
     data() {
           return{
             isCollapse:false
           }
    },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleSelect(key){
      // console.log(key)
      this.$store.commit('dirmanage/getCurrentLink',key)
    }
  }
}
</script>

<style scoped>
  #asiderBar{
    position: absolute;
    width: 14%;
    /*height: 87%;*/
    top: 9.5%;
    bottom: 1.5%;
    left: 1%;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 5px #acc4fe;
  }

/deep/.el-submenu__title {
  font-size: 18px;
  color: #4b4e53;
  font-weight: bold;
}
/deep/  .el-menu{
  width: 98%;
  border-radius: 8px;
}
/deep/ .el-collapse-item__header {
    font-size: 20px;
    padding-left: 20px;
}
.myp{
        margin-left: 50px;
    }
/deep/ .el-button--text{
        color: #100f0f;
        font-size: 16px;
    }
/deep/ .active{
        color: #409EFF;
    }
/deep/ .el-menu-item.is-active {
    /*background: #ff8a6d !important;*/
    border-radius: 8px;

    /*margin-top:5px ;*/
    /*margin-bottom: 5px;*/
    /*margin-left: 15px;*/
    /*margin-right: 15px;*/
   background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3) !important;

  }
/deep/  .el-submenu__title.is-active {
    background: #6db6ff !important;
  }
/deep/ .el-menu .el-menu--inline{
   border-radius: 5px;
}
/deep/  .el-menu-item{
  color:#a5b1ad ;
  font-size: 16px;
  width: 80%;
  left: 10%;
}
  /deep/ .el-menu{
    top:2%;
    left:2%;
  }

</style>
